<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue + Axios + Servlet + Mybatis + Maven</title>
    <script src="/webjars/vue/2.6.14/dist/vue.min.js"></script>
    <script src="/webjars/axios/0.20.0/dist/axios.min.js"></script>
    <script src="/webjars/jquery/3.6.0/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="/webjars/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="/webjars/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .table{
            text-align: center;
        }
    </style>
</head>
<body>
<!--    div.container>div.panel>div.panel-heading+div.panel-footer-->
<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
<!--            div.panel-title>h3-->
            <div class="panel-title">
                <h3>学生列表(Vue + Axios)</h3>
            </div>
        </div>
<!--        table>tr*2>td*7-->
        <table class="table table-striped table-hover">
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>住址</td>
                <td>所在班级</td>
                <td>操作</td>
            </tr>
            <tr v-for="st in students">
                <td>{{st.sid}}</td>
                <td>{{st.sname}}</td>
                <td>{{st.sex}}</td>
                <td>{{st.age}}</td>
                <td>{{st.addr}}</td>
                <td>{{st.cname}}</td>
                <td>
                    <a href="#" class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal" @click="stud=st;title='修改学生'">修改</a>
                    <a href="#" class="btn btn-danger btn-sm" @click="delStud(st.sid)">删除</a>
                </td>
            </tr>
        </table>
        <div class="panel-footer text-right">
            <a href="#" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" @click="stud={};title='添加学生'">添加学生</a>
        </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" >{{title}}</h4>
                    --{{stud}}
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" method="post">
                        <input type="hidden" v-model="stud.sid">
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">学生姓名:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" v-model="stud.sname" placeholder="学生姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">性别:</label>
                            <div class="col-sm-10">
                                <div class="radio">
                                    <label>
                                        <input type="radio" v-model="stud.sex"  value="男" checked>男
                                    </label>
                                    <label>
                                        <input type="radio" v-model="stud.sex" value="女">女
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label  class="col-sm-2 control-label">学生年龄:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" v-model="stud.age" placeholder="学生年龄">
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">学生住址:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" v-model="stud.addr" placeholder="学生住址">
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">所在班级:</label>
                            <div class="col-sm-10">
                                <select class="form-control" v-model="stud.cid">
                                        <option :value="c.cid" v-for="c in classes">{{c.cname}}</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭(C)</button>
                    <button type="button" class="btn btn-primary" @click="save()">保存(S)</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    let vs = new Vue({
        el:'.container',
        data:{
            students:[],
            classes:[],
            stud:{},
            title:'添加学生'
        },
        created(){
            //1、查询所有学生
            this.findAllStudents();
            //2、查询所有班级
            this.findAllClasses();
        },
        methods:{
            //1、查询所有学生
            findAllStudents(){
                axios.get("/student?cmd=list").then(data=>{
                    console.log("student-data",data.data);
                    this.students = data.data;
                })
            },
            //2、查询所有班级
            findAllClasses(){
                axios.get("/classes").then(data=>{
                    console.log("class-data",data.data);
                    this.classes = data.data;
                })
            },
        //    3、保存或添加学生
            save(){
                let url = "/student?cmd=add";
                if (this.stud.sid){
                    url = "/student?cmd=update";
                }
                axios.post(url,"stud="+JSON.stringify(this.stud)).then(data=>{
                    //成功
                    if (data.data.code==0){
                        this.findAllStudents();
                    }
                    $('#myModal').modal('hide');
                })
            },
        //    4、删除学生
            delStud(sid){
                if (confirm("你确定要删除吗？")){
                    axios.get("/student?cmd=delete&sid="+sid).then(data=>{
                        if (data.data.code==0){
                            this.findAllStudents();
                        }
                    })
                }

            }
        }
    })
</script>